<script setup>

import FormCheckGroup from "@/components/FormCheckGroup.vue";
import {computed, defineProps, reactive, ref, watch, defineEmits, inject, toRaw} from "vue";
import {Check, Close, Plus, ArrowUp} from "@element-plus/icons-vue";
import {clearAndPushAll} from "@/utils/ArrayUtil";
import {wordFormedTagContextKey} from "@/components/WordFormedTag/constants";
import {globalContextKey1, globalContextSw} from "@/constants/gConstants";
import {lijuContextSW} from "@/components/constants";

const theProps = defineProps(["formsCountMap", "isBatchMatch", "theLijuEntry", "formsCountCheckedListMap", "batchFormsCntPickSw"]);
const emit = defineEmits(["currLijuFormCountsPickDone"])


/**
 * [{form: formPart, checkedList: []}]
 * @type {UnwrapNestedRefs<*[]>}
 */
// let checkedListOfAllForms = reactive([]);


function currLijuFormCountsPickDoneClicked() {
    // let pickedDoneFormCountsArr = theProps.formsCountCheckedListArr.flatMap(ele=>{return ele.checkedList});
    emit('currLijuFormCountsPickDone', theProps.theLijuEntry.formsCountCheckedListMap);
}

// console.log('initial formcheckgroups');

function testFunc() {
    console.log(theProps.theLijuEntry.formsCountCheckedListMap)
}

const globelContextEvents = inject(globalContextKey1, undefined);
const globelSw = inject(globalContextSw, undefined);
let batchIndividualModeSw = globelSw?.batchIndividual;
let formNoSelectDeleteModeSw = globelSw?.formNoSelectDeleteMode;
// let batchDeletingTheFormV = globelSw?.batchDeletingTheForm;

let isPendingConfirm = ref(false);
function batchMatchOverWriteAllTempPick() {
    isPendingConfirm.value = true;
    globelContextEvents?.batchMatchOverWriteAllTempPick();
}

function batchMatchAddAllTempPick() {
    isPendingConfirm.value = true;
    globelContextEvents?.batchMatchAddAllTempPick();
}

function cancelAllBatchPick() {
    isPendingConfirm.value = false;
    globelContextEvents?.cancelAnyBatchPickFormsCountAction();
}

function confirmAllBatchTempPickIntoPickDone() {
    isPendingConfirm.value = false;
    globelContextEvents?.confirmAllBatchTempPickIntoPickDone();
}

function formBatchDelete(form){
    let theFormsCountMapCheckedListOfForm = theProps.formsCountMap.get(form?.trim());
    if(theFormsCountMapCheckedListOfForm&&theFormsCountMapCheckedListOfForm?.checkedList.length>0){
        isPendingConfirm.value = true;
        globelContextEvents?.batchDeleteAllPickedDoneOfForm(form);
    }
}

const lijuContextSWs = inject(lijuContextSW, undefined);
let individualFormsCountPickSw = lijuContextSWs?.individualFormsCountPickSw;

if (!theProps.isBatchMatch) {
    [...theProps.theLijuEntry.pickDoneFormsCountCheckedListMap.keys()].forEach(form => {
        let pickedDoneArr = theProps.theLijuEntry.pickDoneFormsCountCheckedListMap.get(form);
        pickedDoneArr = pickedDoneArr ? [...toRaw(pickedDoneArr)] : [];
        let theCheckedList = theProps.theLijuEntry.formsCountCheckedListMap.get(form);
        if (theCheckedList) {
            clearAndPushAll(theCheckedList, pickedDoneArr);
        } else {
            theProps.theLijuEntry.formsCountCheckedListMap.set(form, pickedDoneArr);
        }

    })
    // console.log('FormCheckGroups setup complete');
}

// function closeIndividualFormsCountPick(){
//     theProps.individualFormsCountPickSw=false
// }
</script>

<template>
  <!--    <div v-for="[key,forms] in formsCountMap">-->
  <!--      {{key}}=====>{{forms}}-->
  <!--    </div>-->
  <!--    theMap:{{theLijuEntry?.formsCountCheckedListMap}}-->
  <!--  <br/>-->
  <!--    theCheck:{{theProps.formsCountCheckedListMap}}-->
    <FormCheckGroup v-for="[key,forms] in formsCountMap"
                    :theFormCounts="forms"
                    :checkedList="isBatchMatch?null:theLijuEntry?.formsCountCheckedListMap.get(key)"
                    :isBatchMatch="isBatchMatch"
                    @theFormBatchDelete="formBatchDelete">
    </FormCheckGroup>

    <div v-if="formsCountMap.size>0&&isBatchMatch&&batchFormsCntPickSw" style="display: flex">
        <div v-if="!isPendingConfirm" style="margin-top: 2px">
            <span class="my-button-group">
                <button class="my-button" @click="batchMatchAddAllTempPick">
                    <el-icon>
                        <Plus/>
                    </el-icon>
                </button>
                <button class="my-button" @click="batchMatchOverWriteAllTempPick">
                    <el-icon>
                        <ArrowUp/>
                    </el-icon>
                </button>

            </span>
            <el-switch v-model="formNoSelectDeleteModeSw" :disabled="false" style="margin-left: 10px"/>&nbsp;覆盖时未选的删除
        </div>
<!--        <div class="my-button-group" style="margin-left: 20px" v-if="isPendingConfirm">-->
        <div class="my-button-group" v-if="isPendingConfirm" style="padding-bottom: 3px">
            <button class="my-button" @click="confirmAllBatchTempPickIntoPickDone">
                <el-icon>
                    <Check/>
                </el-icon>
            </button>
            <button class="my-button" @click="cancelAllBatchPick">
                <el-icon>
                    <Close/>
                </el-icon>
            </button>
        </div>
    </div>
    <div class="my-button-group" v-else-if="formsCountMap.size>0&&!isBatchMatch&&individualFormsCountPickSw">
        <button class="my-button" @click="currLijuFormCountsPickDoneClicked">
            <el-icon>
                <Check/>
            </el-icon>
        </button>
        <button class="my-button" @click="()=>{individualFormsCountPickSw = false;if(globelSw.anyIndividualIsEditing.value>0){globelSw.anyIndividualIsEditing.value = globelSw.anyIndividualIsEditing.value-1;}}">
            <el-icon>
                <Close/>
            </el-icon>
        </button>
    </div>
    <div v-else-if="formsCountMap.size>0&&!isBatchMatch&&batchIndividualModeSw">
        <button class="my-button" @click="currLijuFormCountsPickDoneClicked">
            <el-icon>
                <Check/>
            </el-icon>
        </button>
    </div>
</template>